
Ext.onReady(function() {

	var sendNo = Ext.create('Ext.form.field.Text', {
		id : 'sendNo',
		fieldLabel : str_message_sendno
	});
	var startdt = Ext.create('Ext.form.field.Date', {
		id : 'startdt',
		fieldLabel : "&nbsp;&nbsp;&nbsp;&nbsp;" + str_message_senddate
	});
	var to = {
		xtype : 'label',
		text : '~'
	};
	var enddt = Ext.create('Ext.form.field.Date', {
		id : 'enddt'
	});
	var searchBtn = {
		id : 'search',
		xtype : 'button',
		text : str_common_query,
		frame : true,
		handler : function() {
			var param = "sendNo=" + sendNo.getValue();
			param = param + "&startdt=" + startdt.getRawValue();
			param = param + "&enddt=" + enddt.getRawValue();
			store.setProxy({
				type : 'ajax',
				url : ctx + '/ab/po/message.do?md=qMessage&' + param,
				reader : {
					type : 'json',
					root : 'message',
					totalProperty : 'totalCount'
				}
			});
			store.loadPage(1);
		}
	};
	
	var delBtn = {
		id : 'delete',
		xtype : 'button',
		iconCls: 'icon-delete',
		text : str_common_delete,
		frame : true,
		handler : function () {
			var records = grid.getSelectionModel().getSelection();
			if(records.length == 0) {
				return;
			}
			var ids = new Array(records.length);
			for (i = 0; i < records.length; i++) {
			    ids[i] = records[i].raw['ID'];
			}
			Ext.Ajax.request({
				url : ctx + '/ab/po/message.do',
				params : {
					md : 'dMessage',
					ID : ids
				},
				success: function(response){
					store.load();
			    }
			});
		}
	};
	
	var store = Ext.create('Ext.data.Store',{
		pageSize : 50,
		fields : ["ID", "BATCHNO", "SENDER", "RECIVER", "SENDDATE",
				"MESSAGE" ]
	});
	
	var grid = Ext.create('Ext.grid.Panel', {
		title:str_message_query,
		region: 'center',
		split: true,
		store : store,
		loadMask : true,
		multiSelect : true,
		columns : [{
            xtype: 'rownumberer',
            width: 40,
            sortable: false
        }, {
			text : str_message_msgid,
			dataIndex : 'ID',
			width : 80,
			hidden : true
		}, {
			text : "BATCHNO",
			dataIndex : 'BATCHNO',
			width : 80,
			hidden : true
		}, {
			text : str_message_sendno,
			dataIndex : 'SENDER',
			width : 120
		}, {
			text : str_message_recvno,
			dataIndex : 'RECIVER',
			width : 120
		}, {
			text : str_message_senddate,
			dataIndex : 'SENDDATE',
			width : 150
		}, {
			text : str_message_msgcontent,
			autoScroll : true,
			dataIndex : 'MESSAGE',
			flex : 1
		} ],
		dockedItems : [{
			xtype : 'toolbar',
			dock: 'top',
			items : [sendNo,'-', startdt, to, enddt,'-', searchBtn, '-', delBtn]
		}],
		bbar : Ext.create('Ext.PagingToolbar', {
			store : store,
			displayInfo : true
		})
	});
	
	var detailPanel = Ext.create('Ext.panel.Panel', {
		region: 'south',
		contentEl: 'detail',
	    split: true,
	    height: 100,
	    minSize: 100,
	    maxSize: 200,
	    collapseMode: 'mini',
	    collapsible : true,
		animCollapse : true
    });
	
	var view = Ext.create('Ext.container.Viewport', {
		layout : 'border',
		renderTo : Ext.getBody(),
		items : [grid, detailPanel]
	});
	
	var messageMarkup = [
	   '{MESSAGE}<br/>'
    ];
	var messageTpl = Ext.create('Ext.Template', messageMarkup);
	
	grid.getSelectionModel().on('selectionchange', function(sm, selectedRecord) {
        if (selectedRecord.length) {
            var detail = Ext.get("detail");
            messageTpl.overwrite(detail, selectedRecord[0].data);
        }
    });
});